<template>
<div>

  <!DOCTYPE html>
  <html lang="en" >
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">

  </head>
  <body>

  <div class="container">
    <div>

      <div style="width: 400px; margin: 100px auto;margin-top: 300px">
        <h1 style="text-align: center;color: #00c6fb">欢迎登录</h1><br><br>
        <el-form ref="form" :model="form" size="normal"  :rules="rules">
          <!--      prop中的名字和底下rules中的名字相对应-->
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="用户名" prefix-icon="el-icon-user" ></el-input>
          </el-form-item>
          <el-form-item prop="password">

            <el-input v-model="form.password" placeholder="密码" prefix-icon="el-icon-key" show-password ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register" style="width: 100%;">注册</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <div style="text-align: center">
      <span>版权所有　© 郑博淋</span>
    </div>

  </div>






  </body>
  </html>



</div>
</template>
<script>
import request from "@/utils/request";
// import jj from '../assets/js/jquery.min';
// import TweenMax from "../assets/js/TweenMax.min.js";
// import index1 from "../assets/js/index.js";
export default {
  name: "Login",
  data(){
    return{
      form :{

      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
      }

    }
  },
  methods :{
    login(){
      //['form']和上方的表单的ref相对应 ,如果用户名规则合法才会执行request
      this.$refs['form'].validate((valid) => {
        if (valid) {
          request.post('/api/user/login',this.form).then(res=>{
            if(res.code =='0'){
              this.$message({
                type : 'success',
                message :'登录成功'
              })
              //设置登录之后跳转的Header用户名,点击登录判断是否有user这个对象，如果有则进入user页面
              console.log(res.data);
              console.log(res.data.ident);
              //在向web服务器发送数据时，必须是JSON字符串类型
              sessionStorage.setItem('user',JSON.stringify(res.data))
              if(res.data.ident == 1){
                this.$router.push('/')//登录成功之后跳转到主页
              }else if (res.data.ident == 0){
                window.open(`/static/index.html`)
                sessionStorage.setItem('user',JSON.stringify(res.data))
              }
            }
            else{
              this.$message({
                type : 'error',
                message :res.msg
              })
            }
          })
        }
      })

    },
    register(){
      this.$router.push('/register')
    }
  }
}
</script>

<style scoped>

</style>